<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Documentation — Monitoror, unified monitoring wallboard</title>
  <meta content="Documentation of Monitoror, which is a wallboard monitoring app to monitor server status; monitor CI builds progress or even display critical values"
        name="description">
  <link href="/favicon.png" rel="icon" type="image/png">
  <link href="/favicon.ico" rel="icon">
  <link href="/assets/styles/main.css" rel="stylesheet" type="text/css">
  <link rel="canonical" href="https://monitoror.com/documentation/">

  <!-- OpenGraph / Twitter cards -->
  <meta property="og:image" content="https://monitoror.com/assets/images/opengraph.png" />
  <meta property="og:site_name" content="Monitoror" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Documentation — Monitoror, unified monitoring wallboard" />
  <meta property="og:url" content="https://monitoror.com/documentation/" />
  <meta property="og:description" content="Documentation of Monitoror, which is a wallboard monitoring app to monitor server status; monitor CI builds progress or even display critical values" />
  <meta name="twitter:image:src" content="https://monitoror.com/assets/images/opengraph.png" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Documentation — Monitoror, unified monitoring wallboard" />
  <meta name="twitter:description" content="Documentation of Monitoror, which is a wallboard monitoring app to monitor server status; monitor CI builds progress or even display critical values" />
</head>
<body class="m-documentation">
<!-- Used to avoid custom scrollbar on macOS -->
<script>
  const isMacOs = navigator.platform.toLowerCase().includes('mac')
  if (isMacOs) {
    document.body.classList.add('macos')
  }
</script>

<div class="m-documentation--header-mobile">
  <button id="js-toggle-menu" class="m-documentation--header-menu-icon">Menu</button>
  <a href="/">
    <img alt="Monitoror" class="m-documentation--header-mobile-logo" src="/assets/images/logo.svg">
  </a>
</div>

<div class="m-sidebar">
  <header class="m-documentation--header">
    <a href="..">
      <img alt="Monitoror" class="m-documentation--logo" src="/assets/images/logo.svg">
    </a>
    <h1 class="m-documentation--header-title">
      Documentation
    </h1>
  </header>

  <aside class="m-documentation--menu">
    <ul>
      <li>
        <a href="#quick-access">Quick access</a>
      </li>
      <li>
        <a href="#configuration">Configuration</a>
        <ul>
          <li><a href="#core-configuration">Core configuration</a></li>
          <li>
            <a href="#ui-configuration">UI configuration</a>
            <ul>
              <li><a href="#query-string-parameters">Query string parameters</a></li>
              <li><a href="#ui-configuration-file-sample">UI configuration file sample</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#monitorable-tiles">Monitorable tiles</a>
        <ul class="m-documentation--menu-monitorable-tiles">
          <li>
            <a href="#azure-devops">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#azure-devops"/>
              </svg>
              Azure DevOps
            </a>
            <ul>
              <li><a href="#tile-azuredevops-build">AZUREDEVOPS-BUILD</a></li>
              <li><a href="#tile-azuredevops-release">AZUREDEVOPS-RELEASE</a></li>
            </ul>
          </li>
          <li>
            <a href="#github">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#github"/>
              </svg>
              GitHub
            </a>
            <ul>
              <li><a href="#tile-github-count">GITHUB-COUNT</a></li>
              <li><a href="#tile-github-checks">GITHUB-CHECKS</a></li>
              <li><a href="#tile-github-pullrequest">GITHUB-PULLREQUEST</a></li>
              <li><a href="#tile-generate-github-pullrequest"><span class="tag-generate">GENERATE:</span>GITHUB-PULLREQUEST</a></li>
            </ul>
          </li>
          <li>
            <a href="#gitlab">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#gitlab"/>
              </svg>
              GitLab
            </a>
            <ul>
              <li><a href="#tile-gitlab-count-issues">GITLAB-COUNT-ISSUES</a></li>
              <li><a href="#tile-gitlab-pipeline">GITLAB-PIPELINE</a></li>
              <li><a href="#tile-gitlab-mergerequest">GITLAB-MERGEREQUEST</a></li>
              <li><a href="#tile-generate-gitlab-mergerequest"><span class="tag-generate">GENERATE:</span>GITLAB-MERGEREQUEST</a></li>
            </ul>
          </li>
          <li>
            <a href="#http">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#http"/>
              </svg>
              HTTP
            </a>
            <ul>
              <li><a href="#tile-http-status">HTTP-STATUS</a></li>
              <li><a href="#tile-http-raw">HTTP-RAW</a></li>
              <li><a href="#tile-http-formatted">HTTP-FORMATTED</a></li>
            </ul>
          </li>
          <li>
            <a href="#jenkins">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#jenkins"/>
              </svg>
              Jenkins
            </a>
            <ul>
              <li><a href="#tile-jenkins-build">JENKINS-BUILD</a></li>
              <li><a href="#tile-generate-jenkins-build"><span class="tag-generate">GENERATE:</span>JENKINS-BUILD</a></li>
            </ul>
          </li>
          <li>
            <a href="#ping">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#ping"/>
              </svg>
              Ping
            </a>
            <ul>
              <li><a href="#tile-ping">PING</a></li>
            </ul>
          </li>
          <li>
            <a href="#pingdom">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#pingdom"/>
              </svg>
              Pingdom
            </a>
            <ul>
              <li><a href="#tile-pingdom-check">PINGDOM-CHECK</a></li>
              <li><a href="#tile-pingdom-transaction-check">PINGDOM-TRANSACTION-CHECK</a></li>
              <li><a href="#tile-generate-pingdom-check"><span class="tag-generate">GENERATE:</span>PINGDOM-CHECK</a></li>
              <li><a href="#tile-generate-pingdom-transaction-check"><span class="tag-generate">GENERATE:</span>PINGDOM-TRANSACTION-CHECK</a></li>
            </ul>
          </li>
          <li>
            <a href="#port">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#port"/>
              </svg>
              Port
            </a>
            <ul>
              <li><a href="#tile-port">PORT</a></li>
            </ul>
          </li>
          <li>
            <a href="#travis-ci">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#travis-ci"/>
              </svg>
              Travis CI
            </a>
            <ul>
              <li><a href="#tile-travisci-build">TRAVISCI-BUILD</a></li>
            </ul>
          </li>
          <li>
            <a href="#uptimecom">
              <svg class="m-documentation--menu-icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="/assets/images/icons.svg#pingdom"/>
              </svg>
              Uptime.com
            </a>
            <ul>
              <li><a href="#tile-uptimecom-check">UPTIMECOM-CHECK</a></li>
              <li><a href="#tile-generate-uptimecom-check"><span class="tag-generate">GENERATE:</span>UPTIMECOM-CHECK</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#utility-tiles">Utility tiles</a>
        <ul>
          <li><a href="#tile-empty">Empty</a></li>
          <li><a href="#tile-group">Group</a></li>
        </ul>
      </li>
      <li>
        <a href="#advanced-options">Advanced options</a>
        <ul>
          <li><a href="#configuration-variants">Configuration variants</a></li>
          <li><a href="#core-cache">Core cache</a></li>
        </ul>
      </li>
    </ul>
  </aside>
</div>

<main class="m-documentation--content" id="quick-access">
  <section class="m-documentation--section">
    <h2 class="m-documentation--section-title">Quick access</h2>

    <div class="m-documentation--block">
      <div class="m-documentation--cards-container" style="--min-column-width: 250px;">
        <a href="/documentation/get-started/" class="m-documentation-card m-documentation-card__big m-documentation-card__blue">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Get started</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#rocket"/>
            </svg>
          </span>
        </a>
        <a href="/download/" class="m-documentation-card m-documentation-card__big m-documentation-card__green">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Download</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg" style="transform: translateY(3px)">
              <use xlink:href="/assets/images/icons.svg#download"/>
            </svg>
          </span>
        </a>
      </div>

      <div class="m-documentation--configuration-side-title"><span>Other resources</span></div>
      <div class="m-documentation--cards-container" style="--min-column-width: 150px;">
        <a href="#configuration" class="m-documentation-card m-documentation-card__dark">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Configuration</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#gear"/>
            </svg>
          </span>
        </a>
        <a href="/guides/" class="m-documentation-card m-documentation-card__dark">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Guides</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#book"/>
            </svg>
          </span>
        </a>
        <a href="https://github.com/monitoror/monitoror/issues" class="m-documentation-card m-documentation-card__dark">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Bug reports & Feature requests</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#bug"/>
            </svg>
          </span>
        </a>
      </div>

      <div id="monitorables" class="m-documentation--configuration-side-title"><span>Monitorable tiles</span></div>
      <div class="m-documentation--cards-container">
        <a href="#azure-devops" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Azure DevOps</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#azure-devops"/>
            </svg>
          </span>
        </a>
        <a href="#github" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">GitHub</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#github"/>
            </svg>
          </span>
        </a>
        <a href="#gitlab" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">GitLab</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#gitlab"/>
            </svg>
          </span>
        </a>
        <a href="#http" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">HTTP</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#http"/>
            </svg>
          </span>
        </a>
        <a href="#jenkins" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Jenkins</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#jenkins"/>
            </svg>
          </span>
        </a>
        <a href="#ping" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Ping</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#ping"/>
            </svg>
          </span>
        </a>
        <a href="#pingdom" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Pingdom</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#pingdom"/>
            </svg>
          </span>
        </a>
        <a href="#port" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Port</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#port"/>
            </svg>
          </span>
        </a>
        <a href="#travis-ci" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Travis CI</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#travis-ci"/>
            </svg>
          </span>
        </a>
        <a href="#uptimecom" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Uptime.com</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#uptimecom"/>
            </svg>
          </span>
        </a>
      </div>

      <div class="m-documentation--configuration-side-title"><span>Utility tiles</span></div>
      <div class="m-documentation--cards-container">
        <a href="#tile-empty" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Empty</span>
          </span>
        </a>
        <a href="#tile-group" class="m-documentation-card">
          <span class="m-documentation-card--mask">
            <span class="m-documentation-card--title">Group</span>

            <svg class="m-documentation-card--icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#group"/>
            </svg>
          </span>
        </a>

        <!-- Fill last 2 columns -->
        <div></div>
        <div></div>
      </div>

      <div class="love-block" id="donate">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#heart"/>
        </svg>

        <p>
          <strong>Support Monitoror</strong><br>
          Do you enjoy Monitoror? <br>
          Please consider supporting developers behind the project :)
        </p>

        <div class="buttons-wrapper">
          <a href="https://opencollective.com/monitoror" class="c-button c-button--clear">
            Donate on OpenCollective
          </a>
          <a href="https://github.com/sponsors/monitoror" class="c-button c-button--clear">
            Become a Sponsor on GitHub
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="m-documentation--section" id="configuration">
    <h2 class="m-documentation--section-title">Configuration</h2>

    <div class="m-documentation--block">
      <p>
        There are two types of configuration:
      </p>

      <ul>
        <li><strong>Core configuration</strong>: credentials, timeouts, cache, ...</li>
        <li><strong>UI configuration</strong>: tiles and layout definition.</li>
      </ul>
    </div>

    <div class="m-documentation--block">
      <h3 id="core-configuration">Core configuration</h3>

      <p>
        Core configuration is set with <strong>environment variables</strong>. Alternatively, <code>.env</code> file
        can also be used beside of monitoror binary.
      </p>

      <dl>
        <dt><code>MO_PORT</code> <code class="type">number</code></dt>
        <dd>
          Application port <br>
          <span class="tag">Default:</span> <code>8080</code>
        </dd>
        <dt><code>MO_ADDRESS</code> <code class="type">string</code></dt>
        <dd>
          Application address <br>
          Can be used to listen a particular network interface instead of all. <br>
          <span class="tag">Default:</span> <code>0.0.0.0</code>
        </dd>
        <dt><code>MO_CONFIG</code> <code class="type">string</code></dt>
        <dd>
          Default configuration URL or path <br>
          Can be a path to file on the filesystem where Monitoror Core is running, or an URL.
          Should point to a valid JSON UI Configuration file. <br>
          <span class="tag">Note:</span> This config will be used if no <code>config</code> param is set on UI.
        </dd>
        <dt><code>MO_CONFIG_{configName}</code> <code class="type">string</code></dt>
        <dd>
          You can provide several named configuration, allowing us to only point to the <code>configName</code> on UI side.
          This make config path and/or URLs server-side only, and keep them private.
          <br>
          <span class="tag">Note:</span> <code>MO_CONFIG</code> is an alias for <code>MO_CONFIG_DEFAULT</code>
        </dd>
      </dl>

      <p>
        Most of tile type have specific Core configuration which are documented in the
        <a href="#monitorable-tiles">Monitorable tiles</a> section.
      </p>

      <p>
        See <a href="#advanced-options">Advanced options</a> section to see more about advanced Core configuration.
      </p>

      <pre class="example"><code>
# Changing port to 8888
MO_PORT=8888

# UI named configurations
MO_CONFIG="./config.json"
MO_CONFIG_SCREEN1="https://example.com/monitoror-screen1.json"
MO_CONFIG_PRODUCTION="/etc/monitoror/production.json"
      </code></pre>
    </div>

    <div class="m-documentation--block">
      <h3 id="ui-configuration">UI configuration</h3>

      <p>
        UI configuration must be stored in <code>.json</code> file.
      </p>

      <p>
        There is two way to load the configuration file:
      </p>

      <ul>
        <li>
          By URL: <br>
          <code>http://localhost:8080?<strong>config</strong>=https://example.com/config.json</code>
        </li>
        <li>
          By name: <br>
          <code>http://localhost:8080?<strong>config</strong>=screen1</code><br>
          See <a href="#core-configuration">Core configuration</a> to know how to define named configurations.
        </li>
      </ul>

      <h4 id="query-string-parameters">Query string parameters</h4>

      <dl>
        <dt><code>config</code> <code class="type">string</code></dt>
        <dd>
          URL to a <code>.json</code> file accessible via HTTP(S), or a config name
        </dd>

        <dt><code>theme</code> <code class="type">string</code></dt>
        <dd>
          One of the following supported themes:
          <ul>
            <li>
              <code>default</code> —
              <a href="https://demo.monitoror.com/?theme=default" target="_blank">Default theme demo</a>
            </li>
            <li>
              <code>dark</code> —
              <a href="https://demo.monitoror.com/?theme=dark" target="_blank">Dark theme demo</a>
            </li>
          </ul>
        </dd>
      </dl>

      <h4 id="ui-configuration-file-sample">UI configuration file sample</h4>

      <p>
        The file is structured like this:
      </p>
      <pre><code class="language-json">
{
  "version": "2.0",
  "columns": 2,
  "tiles": [
    {
      "type": "PING",
      "label": "Localhost",
      "params": { "hostname": "127.0.0.1" }
    },
    {
      "type": "PORT",
      "label": "Dev server",
      "params": { "hostname": "127.0.0.1", "port": 8080 }
    }
  ]
}
      </code></pre>

      <h4 id="ui-root-properties">UI root properties</h4>

      <dl>
        <dt><code>version</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          The configuration format version. <br>
          <p class="note">
            <span class="tag">Note</span>
            Current version is <code>"2.0"</code>
          </p>
        </dd>

        <dt><code>columns</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Number of columns the grid is based on.
        </dd>

        <dt><code>zoom</code> <code class="type">number</code></dt>
        <dd>
          Zoom factor applied to all tiles. <br>
          <span class="tag">Default:</span> <code>1</code>
        </dd>

        <dt><code>tiles</code> <code class="type">Tile[]</code> <span class="required">required</span></dt>
        <dd>
          List of tile definitions. See below to know more about that.
        </dd>
      </dl>

      <h4 id="tile-common-properties">Tile common properties</h4>

      <p>
        Each tile definition has common properties:
      </p>

      <dl>
        <dt><code>type</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Tile type, must be one of those available in the <a href="#monitorable-tiles">Monitorable tiles section</a>.
        </dd>

        <dt><code>label</code> <code class="type">string</code></dt>
        <dd>
          Allow override the automatic Core fill (example: for <code>PING</code>, it's the hostname)
        </dd>

        <dt><code>columnSpan</code> <code class="type">number</code></dt>
        <dd>
          Number of columns to use. <br>
          Must not be greater than number of columns defined in root. <br>
          <span class="tag">Default:</span> <code>1</code>
          <p class="note">
            <span class="tag">Example</span> On a 4 columns grid, you can extend a tile full width with
            <code>columnSpan: 4</code>
          </p>
          <p class="note">
            <span class="tag">TIP</span>
            Fill all previous cells with <a href="#tile-empty">EMPTY tiles</a> if needed.
          </p>
        </dd>

        <dt><code>rowSpan</code> <code class="type">number</code></dt>
        <dd>
          Number of rows to use. <br>
          <span class="tag">Default:</span> <code>1</code>
          <p class="note">
            <span class="tag">Example</span> Tile can take two rows with <code>rowSpan: 2</code>
          </p>
        </dd>

        <dt><code>configVariant</code> <code class="type">string</code></dt>
        <dd>
          Some tiles can have different core configuration. <br>
          See <a href="#configuration-variants">Configuration Variants</a>.
        </dd>
      </dl>
    </div>
  </section>

  <section class="m-documentation--section" id="monitorable-tiles">
    <h2 class="m-documentation--section-title">Monitorable tiles</h2>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#azure-devops"/>
      </svg>

      <h3 id="azure-devops">Azure DevOps</h3>

      <p>
        Show the status of builds and releases.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_AZUREDEVOPS_URL</code> <code class="type">number</code> <span
          class="required">required</span>
        </dt>
        <dd>
          Azure DevOps base URL
        </dd>

        <dt><code>MO_MONITORABLE_AZUREDEVOPS_TOKEN</code> <code class="type">number</code> <span class="required">required</span>
        </dt>
        <dd>
          Your private API token
        </dd>

        <dt><code>MO_MONITORABLE_AZUREDEVOPS_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Azure DevOps
      </p>

      <pre class="example"><code>
MO_MONITORABLE_AZUREDEVOPS_URL="https://azure.example.com/"
MO_MONITORABLE_AZUREDEVOPS_TOKEN="thisisyourtoken"
MO_MONITORABLE_AZUREDEVOPS_TIMEOUT=1000
      </code></pre>

      <h4 id="tile-azuredevops-build">AZUREDEVOPS-BUILD</h4>

      <p>
        Show the status of a build using its definition.
        In the case of a multi-branch definition, a filter can be specified.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>project</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Azure DevOps project name
        </dd>

        <dt><code>definition</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Pipeline definition ID (from URL <code>definitionId</code> query parameter)
        </dd>

        <dt><code>branch</code> <code class="type">string</code></dt>
        <dd>
          Branch name <br>
          <span class="tag">Default:</span> show the last build
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "AZUREDEVOPS-BUILD",
  "params": {
    "project": "project",
    "definition": 1,
    "branch": "master"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Build name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#azure-devops"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="azuredevops-build-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="azuredevops-build-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="azuredevops-build-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-azuredevops-release">AZUREDEVOPS-RELEASE</h4>

      <p>
        Show the status of a release using its definition.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>project</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Azure DevOps project name
        </dd>

        <dt><code>definition</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Release definition ID (from URL <code>definitionId</code> query parameter)
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "AZUREDEVOPS-RELEASE",
  "params": {
    "project": "project",
    "definition": 1
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Release name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#azure-devops"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="azuredevops-release-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="azuredevops-release-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="azuredevops-release-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#github"/>
      </svg>

      <h3 id="github">GitHub</h3>

      <p>
        Show branch or pull request checks status and display search result counters.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_GITHUB_URL</code> <code class="type">string</code></dt>
        <dd>
          GitHub API base URL <br>
          <span class="tag">Default:</span> <code>https://api.github.com/</code>
        </dd>

        <dt><code>MO_MONITORABLE_GITHUB_TOKEN</code> <code class="type">string</code> <span class="required">required</span>
        </dt>
        <dd>
          Personal access token <br>
          <a href="https://github.com/settings/tokens/new?description=Monitoror&scopes=repo">
            Create a personal access token for Monitoror
          </a>
        </dd>

        <dt><code>MO_MONITORABLE_GITHUB_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>5000</code>
        </dd>

        <dt><code>MO_MONITORABLE_GITHUB_COUNTCACHEEXPIRATION</code> <code class="type">number</code>
        </dt>
        <dd>
          Count cache duration in milliseconds. <br>
          <code><a href="#tile-github-count">GITHUB-COUNT</a></code> tile use
          <a href="https://developer.github.com/v3/search/#rate-limit">a specific GitHub API with
          a reduced rate-limit</a>. <br>
          <p class="note">
            <span class="tag">Tip</span>
            If you encounter issues with numerous <code><a href="#tile-github-count">GITHUB-COUNT</a></code> tiles,
            please consider increase this value, and/or use multiple tokens across multiple
            <a href="#configuration-variants">Configuration Variants</a>.
          </p>
          <span class="tag">Default:</span> <code>30000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for GitHub
      </p>

      <pre class="example"><code>
MO_MONITORABLE_GITHUB_URL="https://api.github.com/"
MO_MONITORABLE_GITHUB_TOKEN="thisisyourtoken"
MO_MONITORABLE_GITHUB_TIMEOUT=5000
MO_MONITORABLE_GITHUB_COUNTCACHEEXPIRATION=30000
      </code></pre>

      <h4 id="tile-github-count">GITHUB-COUNT</h4>

      <p>
        Show a counter of issues and pull requests matching a GitHub query.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>query</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Your custom GitHub search query. <br>
          <a href="https://help.github.com/en/github/searching-for-information-on-github/searching-issues-and-pull-requests">
            See the GitHub documentation to build your own query
          </a>.
        </dd>
      </dl>

      <p class="note">
        <span class="tag">Note</span>
        This tile only works for issues and pull requests.
      </p>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITHUB-COUNT",
  "label": "Monitoror open issues",
  "params": {
    "query": "is:issue is:open repo:monitoror/monitoror"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Monitoror open issues</div>
            <svg class="m-documentation--demo-icon" style="transform: translateY(2px)"
                 xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#github"/>
            </svg>
            <div class="m-documentation--demo-value">
              18
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="github-count-state" type="radio" value="success">
              Success
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-github-checks">GITHUB-CHECKS</h4>

      <p>
        Show the status of all checks for a given git reference.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>owner</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub group or user (from URL)
        </dd>

        <dt><code>repository</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub repository name (from URL)
        </dd>

        <dt><code>ref</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          A git reference, commonly a branch name <br>
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITHUB-CHECKS",
  "params": {
    "owner": "monitoror",
    "repository": "monitoror",
    "ref": "develop"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">monitoror @ develop</div>
            <svg class="m-documentation--demo-icon" style="transform: translateY(2px)"
                 xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#github"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="github-checks-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="github-checks-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="github-checks-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-github-pullrequest">GITHUB-PULLREQUEST</h4>

      <p>
        Show the status of all checks for a given pull request.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>owner</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub group or user (from URL)
        </dd>

        <dt><code>repository</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub repository name (from URL)
        </dd>

        <dt><code>id</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          GitHub pull request ID <br>
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITHUB-PULLREQUEST",
  "params": {
    "owner": "monitoror",
    "repository": "monitoror",
    "id": 10
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">PR#10 @ monitoror</div>
            <svg class="m-documentation--demo-icon" style="transform: translateY(2px)"
                 xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#github"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="github-pullrequest-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="github-pullrequest-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="github-pullrequest-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-generate-github-pullrequest">GENERATE:<wbr>GITHUB-PULLREQUEST</h4>

      <p>
        Show each open pull request status.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-github-checks">GITHUB-PULLREQUEST</a></code> tiles. <br>
        N being the number of open pull requests.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>owner</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub group or user (from URL)
        </dd>

        <dt><code>repository</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub repository name (from URL)
        </dd>
      </dl>

      <div class="m-documentation--example">
        <pre class="example"><code class="language-json">
{
  "type": "GENERATE:GITHUB-PULLREQUEST",
  "params": {
    "owner": "monitoror",
    "repository": "monitoror"
  }
}
        </code></pre>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#gitlab"/>
      </svg>

      <h3 id="gitlab">GitLab</h3>

      <p>
        Show branch or merge request pipeline status and display search issues counters.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_GITLAB_URL</code> <code class="type">string</code></dt>
        <dd>
          GitLab API base URL <br>
          <span class="tag">Default:</span> <code>https://gitlab.com/</code>
        </dd>

        <dt><code>MO_MONITORABLE_GITLAB_TOKEN</code> <code class="type">string</code> <span class="required">required</span>
        </dt>
        <dd>
          Personal access token <br>
          <a href="https://gitlab.com/profile/personal_access_tokens">
            Create a personal access token for Monitoror
          </a>
        </dd>

        <dt><code>MO_MONITORABLE_GITLAB_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>5000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for GitLab
      </p>

      <pre class="example"><code>
MO_MONITORABLE_GITLAB_URL="https://gitlab.com/"
MO_MONITORABLE_GITLAB_TOKEN="thisisyourtoken"
MO_MONITORABLE_GITLAB_TIMEOUT=5000
      </code></pre>

      <h4 id="tile-gitlab-count-issues">GITLAB-COUNT-ISSUES</h4>

      <p>
        Show a counter of issues.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>projectId</code> <code class="type">number</code></dt>
        <dd>
          GitLab project ID (from project settings page)
        </dd>

        <dt><code>state</code> <code class="type">string</code></dt>
        <dd>
          GitLab issue state
        </dd>

        <dt><code>labels</code> <code class="type">string[]</code></dt>
        <dd>
          GitLab issue labels
        </dd>

        <dt><code>milestone</code> <code class="type">string</code></dt>
        <dd>
          GitLab issue milestone
        </dd>

        <dt><code>scope</code> <code class="type">string</code></dt>
        <dd>
          GitLab issue scope
        </dd>

        <dt><code>search</code> <code class="type">string</code></dt>
        <dd>
          Space-separated keywords to search in the title or description
        </dd>

        <dt><code>authorId</code> <code class="type">number</code></dt>
        <dd>
          GitLab user ID (from user settings page)
        </dd>

        <dt><code>assigneeId</code> <code class="type">number</code></dt>
        <dd>
          GitLab user ID (from user settings page)
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITLAB-COUNT-ISSUES",
  "label": "Monitoror open issues",
  "params": {
    "projectId": 42,
    "state": "opened"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Monitoror open issues</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#gitlab"/>
            </svg>
            <div class="m-documentation--demo-value">
              18
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="gitlab-count-issues-state" type="radio" value="success">
              Success
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-gitlab-pipeline">GITLAB-PIPELINE</h4>

      <p>
        Show the status of a pipeline for a given git reference.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>projectId</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          GitLab project ID (from project settings page)
        </dd>

        <dt><code>ref</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          A git reference, commonly a branch name
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITLAB-PIPELINE",
  "params": {
    "projectId": 42,
    "ref": "develop"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">monitoror @ develop</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#gitlab"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="../assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="gitlab-pipeline-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="gitlab-pipeline-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="gitlab-pipeline-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-gitlab-mergerequest">GITLAB-MERGEREQUEST</h4>

      <p>
        Show the status of a pipeline for a given merge request.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>projectId</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          GitLab project ID (from project settings page)
        </dd>

        <dt><code>id</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          GitLab merge request ID
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GITLAB-MERGEREQUEST",
  "params": {
    "projectId": 42,
    "id": 10
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">MR#10 @ monitoror</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#gitlab"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="gitlab-mergerequest-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="gitlab-mergerequest-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="gitlab-mergerequest-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-generate-gitlab-mergerequest">GENERATE:GITLAB-MERGEREQUEST</h4>

      <p>
        Show each open merge request status.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-gitlab-mergerequest">GITLAB-MERGEREQUEST</a></code> tiles. <br>
        N being the number of open merge requests.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>projectId</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          GitLab project ID (from project settings page)
        </dd>
      </dl>

      <div class="m-documentation--example">
        <pre class="example"><code class="language-json">
{
  "type": "GENERATE:GITLAB-MERGEREQUEST",
  "params": {
    "projectId": 42
  }
}
        </code></pre>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#http"/>
      </svg>

      <h3 id="http">HTTP</h3>

      <p>
        Send a GET request to a URL, then check the status code and the content.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_HTTP_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>

        <dt><code>MO_MONITORABLE_HTTP_SSLVERIFY</code> <code class="type">boolean</code></dt>
        <dd>
          Check if SSL certificate is valid <br>
          <span class="tag">Default:</span> <code>true</code>
        </dd>

        <dt><code>MO_MONITORABLE_HTTP_CERTIFICATE</code> <code class="type">string</code></dt>
        <dd>
          Client certificate file path to use when making http calls <br>
          <span class="tag">Optional</span> <code></code>
        </dd>

        <dt><code>MO_MONITORABLE_HTTP_KEY</code> <code class="type">string</code></dt>
        <dd>
          Key file path for the client certificate provided <br>
          <span class="tag">Optional</span> <code></code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for HTTP
      </p>

      <pre class="example"><code>
MO_MONITORABLE_HTTP_TIMEOUT=1000
MO_MONITORABLE_HTTP_SSLVERIFY=true
      </code></pre>

      <h4 id="tile-http-status">HTTP-STATUS</h4>

      <p>
        Will only check that status code is in range.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>url</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          URL to fetch over HTTP(S)
        </dd>

        <dt><code>statusCodeMin</code> <code class="type">number</code></dt>
        <dd>
          Minimum HTTP status code <br>
          <span class="tag">Default:</span> <code>200</code>
        </dd>

        <dt><code>statusCodeMax</code> <code class="type">number</code></dt>
        <dd>
          Maximum HTTP status code <br>
          Must be superior or equal to <code>statusCodeMin</code> <br>
          <span class="tag">Default:</span> <code>399</code>
        </dd>
      </dl>

      <p class="note">
        <span class="tag">Tip</span>
        To check a single HTTP status code, set the same value in both <code>statusCodeMin</code> and <code>statusCodeMax</code>
      </p>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "HTTP-STATUS",
  "params": {
    "url": "http://localhost/test",
    "statusCodeMax": 299
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">http://localhost/test</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#http"/>
            </svg>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="http-status-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="http-status-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-http-raw">HTTP-RAW</h4>

      <p>
        Performed checks:
      </p>

      <ul>
        <li>status code in range</li>
        <li>content matches the regex correctly</li>
      </ul>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>url</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          URL to fetch over HTTP(S)
        </dd>

        <dt><code>statusCodeMin</code> <code class="type">number</code></dt>
        <dd>
          Minimum HTTP status code <br>
          <span class="tag">Default:</span> <code>200</code>
        </dd>

        <dt><code>statusCodeMax</code> <code class="type">number</code></dt>
        <dd>
          Maximum HTTP status code <br>
          Must be superior or equal to <code>statusCodeMin</code> <br>
          <span class="tag">Default:</span> <code>399</code>
        </dd>

        <dt><code>regex</code> <code class="type">string</code></dt>
        <dd>
          Match or first group will be show in tile. <br>
          Regex format is RE2, described at <a href="https://golang.org/s/re2syntax">https://golang.org/s/re2syntax</a>
          <br>
          <span class="tag">Note:</span> Regex must be JSON-escaped
          <br>
          <span class="tag">Default:</span> <code>.*</code>
        </dd>
      </dl>

      <p class="note">
        <span class="tag">Tip</span>
        To check a single HTTP status code, set the same value in both <code>statusCodeMin</code> and <code>statusCodeMax</code>
      </p>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "HTTP-RAW",
  "params": {
    "url": "http://localhost/tag",
    "regex": "version:\\s*([^\\s]*)"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">http://localhost/tag</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#http"/>
            </svg>
            <div class="m-documentation--demo-value" data-status-succeeded>
              v2020.1.42
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="http-raw-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="http-raw-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-http-formatted">HTTP-FORMATTED</h4>

      <p>
        Performed checks:
      </p>

      <ul>
        <li>status code in range</li>
        <li>content can be parsed as JSON, XML or YAML (see <code>format</code>)</li>
        <li>presence of the key</li>
        <li>the key value matches the regex correctly</li>
      </ul>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>url</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          URL to fetch over HTTP(S)
        </dd>

        <dt><code>format</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Must be one of following:
          <ul>
            <li><code>JSON</code></li>
            <li><code>XML</code></li>
            <li><code>YAML</code></li>
          </ul>
        </dd>

        <dt><code>key</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Path to the key from which the value is get, following
          <a href="https://stedolan.github.io/jq/manual/">a jq-like format</a>
        </dd>

        <dt><code>statusCodeMin</code> <code class="type">number</code></dt>
        <dd>
          Minimum HTTP status code <br>
          <span class="tag">Default:</span> <code>200</code>
        </dd>

        <dt><code>statusCodeMax</code> <code class="type">number</code></dt>
        <dd>
          Maximum HTTP status code <br>
          Must be superior or equal to <code>statusCodeMin</code> <br>
          <span class="tag">Default:</span> <code>399</code>
        </dd>

        <dt><code>regex</code> <code class="type">string</code></dt>
        <dd>
          Match or first group will be show in tile. <br>
          Regex format is RE2, described at <a href="https://golang.org/s/re2syntax">https://golang.org/s/re2syntax</a>
          <br>
          <span class="tag">Note:</span> Regex must be JSON-escaped
          <br>
          <span class="tag">Default:</span> <code>.*</code>
        </dd>
      </dl>

      <p class="note">
        <span class="tag">Tip</span>
        To check a single HTTP status code, set the same value in both <code>statusCodeMin</code> and <code>statusCodeMax</code>
      </p>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "HTTP-FORMATTED",
  "params": {
    "url": "http://localhost/count",
    "format": "JSON",
    "key": "sub.\"dotted.key\".[0]"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">http://localhost/count</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#http"/>
            </svg>
            <div class="m-documentation--demo-value" data-status-succeeded>
              1337
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="http-json-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="http-json-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#jenkins"/>
      </svg>

      <h3 id="jenkins">Jenkins</h3>

      <p>
        Jenkins tiles are used to display the status of a build.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_JENKINS_URL</code> <code class="type">string</code> <span
          class="required">required</span></dt>
        <dd>
          Jenkins base URL <br>
        </dd>

        <dt><code>MO_MONITORABLE_JENKINS_LOGIN</code> <code class="type">string</code> <span
          class="required">required</span></dt>
        <dd>
          Your login
        </dd>

        <dt><code>MO_MONITORABLE_JENKINS_TOKEN</code> <code class="type">string</code> <span
          class="required">required</span></dt>
        <dd>
          Your private API token
        </dd>

        <dt><code>MO_MONITORABLE_JENKINS_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>2000</code>
        </dd>

        <dt><code>MO_MONITORABLE_JENKINS_SSLVERIFY</code> <code class="type">boolean</code></dt>
        <dd>
          Check if SSL certificate is valid <br>
          <span class="tag">Default:</span> <code>true</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Jenkins
      </p>

      <pre class="example"><code>
MO_MONITORABLE_JENKINS_URL="https://jenkins.example.com"
MO_MONITORABLE_JENKINS_LOGIN="username"
MO_MONITORABLE_JENKINS_TOKEN="thisisyourtoken"
MO_MONITORABLE_JENKINS_TIMEOUT=2000
MO_MONITORABLE_JENKINS_SSLVERIFY=true
      </code></pre>

      <h4 id="tile-jenkins-build">JENKINS-BUILD</h4>

      <p>
        Show the status of a build, pipeline or specific branch of a multi-branch job or pipeline.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>job</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Jenkins job ID
        </dd>

        <dt><code>branch</code> <code class="type">string</code> <span class="required">required if multi-branch</span></dt>
        <dd>
          Branch name
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "JENKINS-BUILD",
  "params": {
    "job": "test-job",
    "branch": "master"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Test job</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#jenkins"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="/assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="jenkins-build-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="jenkins-build-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="jenkins-build-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-generate-jenkins-build">GENERATE:JENKINS-BUILD</h4>

      <p>
        Show the status of all branches of a multi-branch pipeline.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-jenkins-build">JENKINS-BUILD</a></code> tiles. <br>
        N being the number of checks that match the filters that have been set.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>job</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Jenkins job ID
        </dd>

        <dt><code>match</code> <code class="type">string</code></dt>
        <dd>
          Filter branch names with a regex (whitelist)
        </dd>

        <dt><code>unmatch</code> <code class="type">string</code></dt>
        <dd>
          Inverted regex filter based on branch names (blacklist)
        </dd>
      </dl>

      <div class="note">
        <span class="tag">Note</span>
        <code>match</code> and <code>unmatch</code> options cannot be used at the same time.
      </div>
      <div class="note">
        <span class="tag">Note</span>
        Regex format is RE2, described at <a href="https://golang.org/s/re2syntax">https://golang.org/s/re2syntax</a>,
        and must be JSON-escaped
      </div>

      <pre class="example"><code class="language-json">
{
  "type": "GENERATE:JENKINS-BUILD",
  "params": {
    "job": "test-job",
    "match": "^feat/"
  }
}
      </code></pre>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#ping"/>
      </svg>

      <h3 id="ping">Ping</h3>

      <p>
        Get ping status and duration from a hostname.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_PING_COUNT</code> <code class="type">number</code></dt>
        <dd>
          Number of ping sent, used to retrieve an average value <br>
          <span class="tag">Default:</span> <code>2</code>
        </dd>

        <dt><code>MO_MONITORABLE_PING_INTERVAL</code> <code class="type">number</code></dt>
        <dd>
          Interval between ping in milliseconds <br>
          <span class="tag">Default:</span> <code>100</code>
        </dd>

        <dt><code>MO_MONITORABLE_PING_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Global time in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Ping
      </p>

      <pre class="example"><code>
MO_MONITORABLE_PING_COUNT=2
MO_MONITORABLE_PING_INTERVAL=100
MO_MONITORABLE_PING_TIMEOUT=1000
      </code></pre>

      <p class="alert-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#alert"/>
        </svg>
        <strong>Note for Linux and macOS users</strong><br>
        If you see <code>PING: disabled</code> at Monitoror launch,
        you need to relaunch Monitoror as super-user to get <code>PING</code> tiles working. <br><br>
        On Linux, a cleaner solution is to run <code>setcap</code> as super-user to allow Monitoror to bind to raw sockets:
        <code>setcap cap_net_raw=+ep monitoror</code>
      </p>

      <!-- TODO
      <pre><code class="language-json">
      PING --- wait 100ms -- PING
      ------------------------ TIMEOUT
      </code></pre>
      -->

      <h4 id="tile-ping">PING</h4>

      <p>
        Show ping to a hostname status and duration.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>hostname</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Hostname to ping
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "PING",
  "params": {
    "hostname": "localhost"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">localhost</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#ping"/>
            </svg>
            <div class="m-documentation--demo-value" data-status-succeeded>
              42ms
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="ping-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="ping-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#pingdom"/>
      </svg>

      <h3 id="pingdom">Pingdom</h3>

      <p>
        Pingdom checks interface with
        <a href="https://www.pingdom.com/website-monitoring/">pingdom.com/website-monitoring</a>
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_PINGDOM_URL</code> <code class="type">string</code></dt>
        <dd>
          Pingdom API base URL <br>
          <span class="tag">Default:</span> <code>https://api.pingdom.com/api/3.1</code>
        </dd>

        <dt><code>MO_MONITORABLE_PINGDOM_TOKEN</code> <code class="type">number</code> <span
          class="required">required</span></dt>
        <dd>
          Your private API token <br>
          On Pingdom, go to
          <a href="https://my.pingdom.com/app/api-tokens">Integrations > The Pingdom API</a>,
          then click <strong>Add API token</strong>
        </dd>

        <dt><code>MO_MONITORABLE_PINGDOM_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>

        <dt><code>MO_MONITORABLE_PINGDOM_CACHEEXPIRATION</code> <code class="type">number</code></dt>
        <dd>
          Specific cache duration for Pingdom check <br>
          <span class="tag">Default:</span> <code>30000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Pingdom
      </p>

      <pre class="example"><code>
MO_MONITORABLE_PINGDOM_URL="https://api.pingdom.com/api/3.1"
MO_MONITORABLE_PINGDOM_TOKEN="thisisyourtoken"
MO_MONITORABLE_PINGDOM_TIMEOUT=1000
MO_MONITORABLE_PINGDOM_CACHEEXPIRATION=30000
      </code></pre>

      <h4 id="tile-pingdom-check">PINGDOM-CHECK</h4>

      <p>
        Show state of a Pingdom specific check.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>id</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Pingdom check ID
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "PINGDOM-CHECK",
  "params": {
    "id": 10
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Check name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#pingdom"/>
            </svg>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="pingdom-check-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="pingdom-check-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-pingdom-transaction-check">PINGDOM-TRANSACTION-CHECK</h4>

      <p>
        Show state of a Pingdom specific transaction check.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>id</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Pingdom transaction check ID
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "PINGDOM-TRANSACTION-CHECK",
  "params": {
    "id": 10
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Check name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#pingdom"/>
            </svg>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="pingdom-transaction-check-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="pingdom-transaction-check-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-generate-pingdom-check">GENERATE:PINGDOM-CHECK</h4>

      <p>
        Show state of all Pingdom checks.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-pingdom-check">PINGDOM-CHECK</a></code> tiles. <br>
        N being the number of checks that match the filters that have been set.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>tags</code> <code class="type">string</code></dt>
        <dd>
          Pingdom check tag list separated by commas
        </dd>

        <dt><code>sortBy</code> <code class="type">string</code></dt>
        <dd>
          Allow to sort checks by following:
          <ul>
            <li><code>name</code></li>
          </ul>
        </dd>
      </dl>

      <pre class="example"><code class="language-json">
{
  "type": "GENERATE:PINGDOM-CHECK",
  "params": {
    "tags": "eu-west",
    "sortBy": "name"
  }
}
      </code></pre>

      <h4 id="tile-generate-pingdom-transaction-check">GENERATE:PINGDOM-TRANSACTION-CHECK</h4>

      <p>
        Show state of all Pingdom transaction checks.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-pingdom-transaction-check">PINGDOM-TRANSACTION-CHECK</a></code> tiles. <br>
        N being the number of checks that match the filters that have been set.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>tags</code> <code class="type">string</code></dt>
        <dd>
          Pingdom transaction check tag list separated by commas
        </dd>

        <dt><code>sortBy</code> <code class="type">string</code></dt>
        <dd>
          Allow to sort transaction checks by following:
          <ul>
            <li><code>name</code></li>
          </ul>
        </dd>
      </dl>

      <pre class="example"><code class="language-json">
{
  "type": "GENERATE:PINGDOM-TRANSACTION-CHECK",
  "params": {
    "tags": "eu-west",
    "sortBy": "name"
  }
}
      </code></pre>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#port"/>
      </svg>

      <h3 id="port">Port</h3>

      <p>
        Check if a port is open with something listening behind.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_PORT_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Port
      </p>

      <pre class="example"><code>
MO_MONITORABLE_PORT_TIMEOUT=1000
      </code></pre>

      <h4 id="tile-port">PORT</h4>

      <p>
        Will success when the port is open with something listening behind.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>hostname</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          Hostname to scan
        </dd>

        <dt><code>port</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Port to scan
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "PORT",
  "params": {
    "hostname": "localhost",
    "port": 443
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">localhost:443</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#port"/>
            </svg>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="port-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="port-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#travis-ci"/>
      </svg>

      <h3 id="travis-ci">Travis CI</h3>

      <p>
        Show Travis CI build status and progress.
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_TRAVISCI_URL</code> <code class="type">string</code></dt>
        <dd>
          Travis CI API base URL <br>
          <span class="tag">Default:</span> <code>https://api.travis-ci.com/</code>
        </dd>

        <dt><code>MO_MONITORABLE_TRAVISCI_TOKEN</code> <code class="type">string</code> <span
          class="required">required</span></dt>
        <dd>
          Your private API token
        </dd>

        <dt><code>MO_MONITORABLE_TRAVISCI_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>2000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Travis CI
      </p>

      <pre class="example"><code>
MO_MONITORABLE_TRAVISCI_URL="https://api.travis-ci.com/"
MO_MONITORABLE_TRAVISCI_TOKEN="thisisyourtoken"
MO_MONITORABLE_TRAVISCI_TIMEOUT=2000
      </code></pre>

      <h4 id="tile-travisci-build">TRAVISCI-BUILD</h4>

      <p>
        Show the status of the build of the branch of a specific project.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>owner</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub group or user (from URL)
        </dd>

        <dt><code>repository</code> <code class="type">string</code> <span class="required">required</span></dt>
        <dd>
          GitHub repository name (from URL)
        </dd>

        <dt><code>branch</code> <code class="type">string</code></dt>
        <dd>
          Branch name <br>
          <span class="tag">Default:</span> show the last build
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "TRAVISCI-BUILD",
  "params": {
    "owner": "Alex-D",
    "repository": "check-disk-space",
    "branch": "master"
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Build name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#travis-ci"/>
            </svg>
            <div class="m-documentation--demo-message" data-status-running>
              0:42
            </div>
            <div class="m-documentation--demo-message" data-status-warning>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              5 minutes ago
            </div>
            <div class="m-documentation--demo-author" data-status-error>
              <img alt="" class="m-documentation--demo-author-avatar" src="../assets/images/avatar.png">
              John Doe
            </div>
            <div class="m-documentation--demo-progress" data-status-running>
              <div class="m-documentation--demo-progress-bar"></div>
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="travisci-build-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="travisci-build-state" type="radio" value="warning">
              Warning
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="travisci-build-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <p>
        In this example, the tile will show the status of
        <code><a href="https://github.com/Alex-D/check-disk-space">github.com/Alex-D/check-disk-space</a>@master</code>
      </p>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#uptimecom"/>
      </svg>

      <h3 id="uptimecom">Uptime.com</h3>

      <p>
        Uptime.com checks interface with
        <a href="https://uptime.com/">uptime.com</a>
      </p>

      <h5 class="m-documentation--configuration-side-title">Core configuration</h5>

      <dl>
        <dt><code>MO_MONITORABLE_UPTIMECOM_URL</code> <code class="type">string</code></dt>
        <dd>
          Uptime.com API base URL <br>
          <span class="tag">Default:</span> <code>https://uptime.com/api/v1/</code>
        </dd>

        <dt><code>MO_MONITORABLE_UPTIMECOM_TOKEN</code> <code class="type">number</code> <span
          class="required">required</span></dt>
        <dd>
          Your private API token <br>
          On Uptime.Com, go to
          <a href="https://uptime.com/api/tokens">Settings > API</a>
        </dd>

        <dt><code>MO_MONITORABLE_UPTIMCOM_TIMEOUT</code> <code class="type">number</code></dt>
        <dd>
          Timeout in milliseconds before returning error <br>
          <span class="tag">Default:</span> <code>1000</code>
        </dd>

        <dt><code>MO_MONITORABLE_UPTIMCOM_CACHEEXPIRATION</code> <code class="type">number</code></dt>
        <dd>
          Specific cache duration for Uptime.com check <br>
          <span class="tag">Default:</span> <code>30000</code>
        </dd>
      </dl>

      <p class="success-block">
        <svg xmlns="http://www.w3.org/2000/svg">
          <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
        </svg>
        <a href="#configuration-variants">Configuration Variants</a> are available for Uptime.com
      </p>

      <pre class="example"><code>
MO_MONITORABLE_UPTIMECOM_URL="https://uptime.com/api/v1/"
MO_MONITORABLE_UPTIMECOM_TOKEN="thisisyourtoken"
MO_MONITORABLE_UPTIMECOM_TIMEOUT=1000
MO_MONITORABLE_UPTIMECOM_CACHEEXPIRATION=30000
      </code></pre>

      <h4 id="tile-uptimecom-check">UPTIMECOM-CHECK</h4>

      <p>
        Show state of a Uptime.com specific check.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>id</code> <code class="type">number</code> <span class="required">required</span></dt>
        <dd>
          Uptime.com check ID
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "UPTIMECOM-CHECK",
  "params": {
    "id": 10
  }
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile">
            <div class="m-documentation--demo-label">Check name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#uptimecom"/>
            </svg>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="uptimecom-check-state" type="radio" value="succeeded">
              Success
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-warning">
              <input data-state-switch name="uptimecom-check-state" type="radio" value="warning">
              Maintenance
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="uptimecom-check-state" type="radio" value="error">
              Error
            </label>
          </div>
        </div>
      </div>

      <h4 id="tile-generate-uptimecom-check">GENERATE:UPTIMECOM-CHECK</h4>

      <p>
        Show state of all Uptime.com checks.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        This tile is a generator tile that will be replaced by N classic
        <code><a href="#tile-uptimecom-check">UPTIMECOM-CHECK</a></code> tiles. <br>
        N being the number of checks that match the filters that have been set.
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>tags</code> <code class="type">string</code></dt>
        <dd>
          Uptime.com check tag list separated by commas
        </dd>

        <dt><code>sortBy</code> <code class="type">string</code></dt>
        <dd>
          Allow to sort checks by following:
          <ul>
            <li><code>name</code></li>
          </ul>
        </dd>
      </dl>

      <pre class="example"><code class="language-json">
{
  "type": "GENERATE:UPTIMECOM-CHECK",
  "params": {
    "tags": "eu-west",
    "sortBy": "name"
  }
}
      </code></pre>
    </div>
  </section>


  <section class="m-documentation--section" id="utility-tiles">
    <h2 class="m-documentation--section-title">Utility tiles</h2>

    <div class="m-documentation--block">
      <h3 id="tile-empty">Empty</h3>

      <p>
        Add an empty tile (to fill lines, columns, align things, ...).
      </p>

      <pre><code class="language-json">
{ "type": "EMPTY" }
      </code></pre>
    </div>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#group"/>
      </svg>

      <h3 id="tile-group">Group</h3>

      <p>
        Group sub tiles in one tile to get the global status of all sub tiles.
      </p>

      <p class="note">
        <span class="tag">Note</span>
        Group will only show non-successful tiles. If the tile is empty: everything is fine!
      </p>

      <h5 class="m-documentation--configuration-side-title">UI configuration</h5>

      <dl>
        <dt><code>tiles</code> <code class="type">Tile[]</code> <span class="required">required</span></dt>
        <dd>
          List of tile definitions <br>
          <p class="note">
            <span class="tag">Note</span>
            Cannot contain <code>GROUP</code> nor <code>EMPTY</code> tiles
          </p>
        </dd>
      </dl>

      <div class="m-documentation--example-and-demo">
        <pre class="example"><code class="language-json">
{
  "type": "GROUP",
  "label": "Group name",
  "tiles": [
    {
      "type": "PING",
      "label": "Test",
      "params": {
        "hostname": "example.com"
      }
    },
    {
      "type": "AZUREDEVOPS-BUILD",
      "params": {
        "project": "project",
        "definition": 1,
        "branch": "master"
      }
    },
    {
      "type": "PINGDOM-CHECK",
      "params": {
        "id": 42
      }
    }
  ]
}
        </code></pre>

        <div class="m-documentation--demo">
          <div class="m-documentation--demo-tile m-documentation--demo-tile-group">
            <div class="m-documentation--demo-label">Group name</div>
            <svg class="m-documentation--demo-icon" xmlns="http://www.w3.org/2000/svg">
              <use xlink:href="/assets/images/icons.svg#group"/>
            </svg>
            <div class="m-documentation--demo-sub-tiles">
              <div class="m-documentation--demo-sub-tile m-documentation--demo-sub-tile__status-failed"
                   data-status-error>
                <div class="m-documentation--demo-sub-tile-content">
                  <div class="m-documentation--demo-sub-tile-label">
                    Test
                  </div>

                  <div class="m-documentation--demo-sub-tile-status">
                    <svg class="m-documentation--demo-sub-tile-icon" xmlns="http://www.w3.org/2000/svg">
                      <use xlink:href="/assets/images/icons.svg#ping"/>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="m-documentation--demo-sub-tile m-documentation--demo-sub-tile__status-succeeded"
                   data-status-running>
                <div class="m-documentation--demo-sub-tile-content">
                  <div class="m-documentation--demo-sub-tile-label">
                    master
                  </div>

                  <div class="m-documentation--demo-sub-tile-status">
                    <svg class="m-documentation--demo-sub-tile-icon" xmlns="http://www.w3.org/2000/svg">
                      <use xlink:href="/assets/images/icons.svg#azure-devops"/>
                    </svg>
                  </div>

                  <div class="m-documentation--demo-sub-tile-progress-time">
                    0:42
                  </div>
                  <div class="m-documentation--demo-sub-tile-progress">
                    <div class="m-documentation--demo-sub-tile-progress-bar"></div>
                  </div>
                </div>
              </div>
              <div class="m-documentation--demo-sub-tile m-documentation--demo-sub-tile__status-failed"
                   data-status-error>
                <div class="m-documentation--demo-sub-tile-content">
                  <div class="m-documentation--demo-sub-tile-label">
                    Check name
                  </div>

                  <div class="m-documentation--demo-sub-tile-status">
                    <svg class="m-documentation--demo-sub-tile-icon" xmlns="http://www.w3.org/2000/svg">
                      <use xlink:href="/assets/images/icons.svg#pingdom"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="m-documentation--demo-message" data-status-running>
              3 / 3
            </div>
            <div class="m-documentation--demo-message" data-status-succeeded>
              3 / 3
            </div>
            <div class="m-documentation--demo-message" data-status-error>
              1 / 3
            </div>
          </div>
          <div class="m-documentation--demo-switch">
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-running">
              <input data-state-switch name="group-state" type="radio" value="running">
              Running
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-error">
              <input data-state-switch name="group-state" type="radio" value="error">
              Error
            </label>
            <label class="m-documentation--demo-switch-label m-documentation--demo-switch-succeeded">
              <input data-state-switch name="group-state" type="radio" value="succeeded">
              Success
            </label>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="m-documentation--section" id="advanced-options">
    <h2 class="m-documentation--section-title">Advanced options</h2>

    <div class="m-documentation--block">
      <svg class="m-documentation--tile-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="/assets/images/icons.svg#configuration-variants"/>
      </svg>

      <h3 id="configuration-variants">Configuration Variants</h3>

      <p>
        Configuration Variants allow you to monitor multiple servers (e.g.: multiple Jenkins servers).
      </p>

      <p>
        To do so, you will need some more lines in your core configuration and some additional
        <code>configVariant</code> field in
        UI configuration.
      </p>

      <pre class="example"><code>
# In your .env file
MO_MONITORABLE_JENKINS_URL="http://jenkins.example.com"
MO_MONITORABLE_JENKINS_LOGIN="username"
MO_MONITORABLE_JENKINS_TOKEN="thisisyourtoken"

MO_MONITORABLE_JENKINS_PROD_URL="http://jenkins-prod.example.com"
MO_MONITORABLE_JENKINS_PROD_LOGIN="username"
MO_MONITORABLE_JENKINS_PROD_TOKEN="thisisyourtoken"
      </code></pre>

      <pre><code class="language-json">
{
  "columns": 2,
  "tiles": [
    {
      "type": "JENKINS-BUILD",
      "params": { "job": "build", "branch": "master" }
    },
    {
      "type": "JENKINS-BUILD",
      "params": { "job": "deploy-internal" }
    },
    {
      "type": "JENKINS-BUILD",
      "configVariant": "prod",
      "params": { "job": "deploy-prod" }
    },
  ]
}
      </code></pre>

      <p>
        In this example:
      </p>
      <ul>
        <li>the first 2 builds will fetch their data from <code>http://jenkins.example.com</code></li>
        <li>the last one from <code>http://jenkins-prod.example.com</code></li>
      </ul>
    </div>

    <div class="m-documentation--block">
      <h3 id="core-cache">Core cache</h3>

      <!-- TODO: add more details -->

      <dl>
        <dt><code>MO_UPSTREAMCACHEEXPIRATION</code> <code class="type">number</code></dt>
        <dd>
          Throttle delay in milliseconds for external requests. Avoid overloading services <br>
          <span class="tag">Default:</span> <code>10000</code>
        </dd>

        <dt><code>MO_DOWNSTREAMCACHEEXPIRATION</code> <code class="type">number</code></dt>
        <dd>
          Duration in milliseconds of the previous result by URL which is returned in case of timeout. Avoid false
          negative on CI checks <br>
          <span class="tag">Default:</span> <code>120000</code>
        </dd>

        <dt><code>MO_INITIALMAXDELAY</code> <code class="type">number</code></dt>
        <dd>
          Duration in milliseconds used as the maximum delay on each tile's first update to avoid bursting N requests at the same time on start <br>
          <span class="tag">Default:</span> <code>1700</code>
        </dd>
      </dl>

<!--      <pre>-->
<!--      1st call-->
<!--      UI -&ndash;&gt; Core -&ndash;&gt; External Build API-->
<!--      UI <-&#45;&#45; Core <&#45;&#45;&#45;&#45;&#45;&#45; |-->
<!--      </pre>-->

<!--      <pre>-->
<!--      2nd call (throttle example)-->
<!--      UI -&ndash;&gt; Core-->
<!--      UI <-&#45;&#45; Cache-->
<!--      </pre>-->

<!--      <pre>-->
<!--      3rd call (timeout example)-->
<!--      UI -&ndash;&gt; Core -&ndash;&gt; External Build API-->
<!--      UI <-&#45;&#45; Cache <-| X Timeout-->
<!--      </pre>-->
    </div>
  </section>
</main>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.17.1/build/highlight.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
